<template>
	<view class="content">
		<div class="add-top">
			<u-search shape="square" :show-action="false" :clearabled="true" placeholder="请输入员工姓名" v-model="keyword" @search="handleSearch"></u-search>
			<view class="addbtn" @click="navTo('/pages/agent/user/operate-add')">
				<image src="/static/img/agent/addicon.png" mode=""></image>
				<p>添加员工</p>
			</view>
		</div>
		
		<view class="repair-list">
			<div class="repair-title">
				<span></span>
				<p>员工列表</p>
			</div>
			<view class="repair-item" v-for="(item, index) in dataList" :key="index">
				<p class="item-name">{{ item.nickname }}</p>
				<span class="changdi">{{ item.venues_name }}</span>
				<div class="yuangong">
					<image v-if="item.avatar" :src="item.avatar" mode=""></image>
					<p v-if="!item.avatar && item.nickname">{{item.nickname.charAt(0)}}</p>
					<div class="yginfo">
						<span>员工ID：{{ item.id }}</span>
						<span>手机号码：{{ item.mobile }}</span>
						<span>注册时间：{{ item.createtime }}</span>
					</div>
				</div>
				<view class="item-operate" @click="operateEdit(item)">
					用户修改
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { operateList, addOperate, deleteOperate } from '../../../api/api.js';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			loadingType: 'more', //加载更多状态
			dataList: [],
			token: '',
			page: 1,
			keyword: ''
		};
	},
	onLoad(options) {
		this.loadData();
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		async handleSearch() {
			this.page = 1;
			let form = {
				page: this.page,
				limit: 10,
				sel_name: this.keyword
			};
			let res;
			res = await operateList(form);
			this.dataList =  res.data.data;
		},
		//加载 ，带下拉刷新和上滑加载
		async loadData(type = 'add', loading) {
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
			let form = {
				page: this.page,
				limit: 10,
				sel_name: this.keyword
			};
			let res;
			res = await operateList(form);

			let dataList = res.data.data;
			this.page++;
			if (type === 'refresh') {
				this.dataList = [];
			}

			this.dataList = this.dataList.concat(dataList);

			//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
			this.loadingType = res.data.current_page >= res.data.last_page ? 'nomore' : 'more';
			if (type === 'refresh') {
				if (loading == 1) {
					uni.hideLoading();
				} else {
					uni.stopPullDownRefresh();
				}
			}
		},
		operateEdit(item) {
			console.log(item, 'itemitem');
			uni.setStorageSync('operateId', item.id)
			uni.navigateTo({
				url:'/pages/agent/user/operate-add?id=' + item.id
			})
		},
		operateDelete(item){
			uni.showModal({
				title: '提示',
				content: '确定要删除吗',
				success: (res) => {
					if (res.confirm) {
						deleteOperate({user_id:item.user_id}).then(res => {
							this.page = 1;
							this.loadData('refresh');
							uni.showToast({
								title:'删除成功'
							})
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	},
	//加载更多
	onReachBottom() {
		this.loadData();
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #F7F7F7;
}
.add-top{
	width: 93%;
	padding: 15px;
	height: 144px;
	background: url('../../../static/img/agent/addbg.png') no-repeat center;
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
	.u-search{
		width: 220px;
		height: 44px;
		background-color: rgb(242, 242, 242);
		box-shadow: 0px 6px 58px 0px rgba(196,203,214,0.1);
		border-radius: 12px;
	}
	
	.addbtn{
		width: 99px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		background: #FFFFFF;
		box-shadow: 0px 6px 58px 0px rgba(196,203,214,0.1);
		border-radius: 12px;
		display: flex;
		margin-left:10px;
		image{
			width: 16px;
			height: 16px;
			margin-top: 14px;
			margin-left: 10px;
		}
		p{
			font-weight: 500;
			font-size: 16px;
			color: #49A1FD;
		}
	}
}
.repair-list {
	margin-top: -110px;
	.repair-title{
		padding: 20px;
		display: flex;
		align-items: center;
		span{
			width: 4px;
			height: 18px;
			background: #FFFFFF;
			border-radius: 3px;
			margin-right: 6px;
		}
		p{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 17px;
			color: #FFFFFF;
		}
	}
	.repair-item {
		width: 98%;
		// height: 144px;
		background: url('../../../static/img/agent/ygbg.png') no-repeat center;
		background-size: 100% 100%;
		margin: 0px auto;
		padding: 20px;
		.item-name{
			font-weight: 600;
			font-size: 14px;
			color: #000000;
		}
		.changdi{
			margin-bottom: 15px;
			font-size: 14px;
		}
		.yuangong{
			display: flex;
			align-items: center;
			padding-bottom: 14px;
			margin-bottom: 15px;
			border-bottom: 1px solid rgba(73,161,253,0.2);;
			image{
				width: 60px;
				height: 60px;
				margin-right: 15px;
			}
			p{
				width: 60px;
				height: 60px;
				background-color: #49A1FD;
				color: #FFFFFF;
				margin-right: 15px;
				text-align: center;
				line-height: 60px;
				font-size: 30px;
			}
			.yginfo{
				font-weight: 400;
				font-size: 12px;
				color: #666666;
				line-height: 20px;
				span{
					display: block;
				}
			}
		}
		.item-operate{
			width: 68px;
			height: 29px;
			background: #49A1FD;
			border-radius: 4px;
			font-weight: 500;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 29px;
			text-align: center;
			margin-left: auto;
		}
	}
}
.uni-load-more{
	margin-top: 50px;
}
</style>
